import React, { useState, useEffect } from 'react'
import Mobile from './components/mobile'
import { connect } from 'umi'
import FixButton from '@/components/FlxButton'
import { Row, Col, Collapse, Checkbox, Space } from 'antd'
const { Panel } = Collapse;
const wechatNative = (props) => {
    const { dispatch } = props
    const [showKeData, setShowKeyData] = useState([{ disabled: true, key: 'user', label: '基本信息', value: 'user', }, { label: '课程', disabled: true, key: 'task', value: 'task' }, { label: '订单', value: 'order', }, { label: '工具', value: 'tools', }])
    const [data, setData] = useState({})
    const { id } = data
    const fetchData = () => {
        dispatch({
            type: 'wechatPage/fetchPageConfigDetail',
            payload: {
                pageType: "user"
            },
            callback: (e = {}) => {
                const { id, pageConfig = '{}' } = e
                if (id) {
                    setShowKeyData(
                        [...JSON.parse(pageConfig)])
                    setData(e)
                }
            }
        })
    }
    const submit = () => {
        dispatch({
            type: 'wechatPage/fakeSavePageConfig',
            payload: {
                id,
                pageType: "user",
                pageConfig: JSON.stringify(showKeData)
            },
            callback: (e) => {
                fetchData()
            }
        })
    }
    useEffect(() => {
        fetchData()
    }, [])
    return <div style={{ display: "flex" }}>

        <Mobile data={showKeData}></Mobile>

        <div style={{ flex: "1", marginLeft: 24 }}>
            <Collapse collapsible="disabled" defaultActiveKey={['1']} >
                {showKeData.map((val, o) => {
                    const { label, value, key = '', disabled } = val
                    return <Panel key={o} header={<Space onClick={(e) => {
                        e.stopPropagation()
                    }}>
                        <Checkbox disabled={disabled} onChange={(e) => {
                            e.stopPropagation()
                            setShowKeyData(showKeData.map(o => {
                                if (o.value === value) {
                                    return {
                                        ...o,
                                        key: o.key === value ? '' : value
                                    }
                                }
                                else {
                                    return o
                                }
                            }))
                        }} checked={key === value} value={key}></Checkbox>
                        <div>{label}</div>
                    </Space>}>

                    </Panel>
                })}
            </Collapse>
        </div>

        <FixButton onOk={submit}></FixButton>
    </div>
}
export default connect(({ loading }) => ({
    loading: loading,
}))(wechatNative);
